<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <button id="savebtn" class="savebtn">存储Cookie</button>
    </div>
</body>

<script>
    // 使用和学习 cookie 必须要使用带有服务器环境的编辑器打开  

    // cookie 是跟服务器有关  域名挂钩  域名区别  (www.taobao.com)

    // cookie 的创建  
    // 1. cookie 的存取都依赖于 document.cookie 
    // 2. cookie是以键值对(key=value)形式存在的字符串  {key:value}   key=value 
    // 3. cookie 存储的时候是一条一条的的存的 (每条数据之前用"; " 分隔)

    // cookie 的读取 
    // 1. cookie 的存取都依赖于 document.cookie 
    // 2. cookie 存储的时候是一条一条的的存的 (每条数据之前用"; " 分隔)
    var savebtn = document.getElementById("savebtn")

    // 存cookie  
    // savebtn.onclick = function(){
    //     // 测试 cookie  数据 
    //     document.cookie = "user=zkl"
    //     document.cookie = "pass=123123"
    //     document.cookie = "phone=18012341234"
    //     document.cookie = "email=123123@qq.com"
    // }


    // cookie 的时效性   ==> cookie可以设置过期时间
    // 默认情况下 cookie 在浏览器关闭了就会过期删除   (网页关闭cookie不会过期删除)
    // 如果想要设置一个过期时间   需要给cookie设置 expires 属性修饰
    // expires 可以接收一个字符串类型的时间(世界时间UTC )作为过期时间  

    // 如何转世界时间
    // 1  减去 8小时
    // 2. 日期API处理

    var date  = new Date()
    console.log(date)
    // console.log(date.toUTCString())    // 转为 世界时(UTC)
    // console.log(date.toString())     //  转字符串
    // console.log(date.toDateString())    // 日期部分  转字符串 
    // console.log(date.toTimeString())    // 时间部分  转字符串 

    // 时间本地化
    // console.log(date.toLocaleString())    //  按照本地时间格式转 字符串
    // console.log(date.toLocaleDateString())    //  按照本地时间格式转 日期部分 字符串
    // console.log(date.toLocaleTimeString())    //  按照本地时间格式转 时间部分 字符串
    

    // cookie 的 访问路径  path  
    // path 可以接收一个 路径作为cookie的存储路径  (一般是 /   那就直接跟域名绑定  )  

    savebtn.onclick = function(){
        var date = new Date()
        date.setDate(date.getDate()+7)  // 7天后失效 cookie
        console.log(date)
        // 测试 cookie  数据 
        // document.cookie = "user=zkl;expires="+date.toUTCString()
        // document.cookie = "pass=123123;expires="+date.toUTCString()
        // document.cookie = "phone=18012341234;expires="+date.toUTCString()
        // document.cookie = "email=123123@qq.com;expires="+date.toUTCString()

        // 默认存储在当前文件所在的目录  同目录以及其子目录可以访问  
        // document.cookie = "user=zuozuomu;expires="+date.toUTCString()+";path=/day1"
        // document.cookie = "pass=123123;expires="+date.toUTCString()+";path=/day1"
        // document.cookie = "phone=18012341234;expires="+date.toUTCString()+";path=/day1"
        // document.cookie = "email=123123@qq.com;expires="+date.toUTCString()+";path=/day1"
        
        // / 根目录下的所有文件都可以访问
        document.cookie = "user=wh2107;expires="+date.toUTCString()+";path=/";
        document.cookie = "pass=123123;expires="+date.toUTCString()+";path=/";
        document.cookie = "phone=18012341234;expires="+date.toUTCString()+";path=/";
        document.cookie = "email=123123@qq.com;expires="+date.toUTCString()+";path=/";
    }
</script>
</html>